<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购货车</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../font/iconfont/iconfont.css">
    <link rel="stylesheet" href="../font/iconfont/iconfont.ttf">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/shoppingCar.css">
    <style></style>
</head>
<body>
<!--收藏-->
<div class="model_box collection_confirm_box">
    <div class="model_content">
        <div class="close_model_box icon-font icon-delete2circlecoloring" onclick="closeCollection()"></div>
        <div class="model_info">
            <div class="model_info_title">
                <div class="model_tip_icon icon-font icon-tishi2"></div>
                <div class="model_tip_title">
                    <div class="title_zh">收藏成功，您可以在收藏夹中查看该商品</div>
                    <div class="title_en">Collection success, you can view this product in the favorites</div>
                </div>
            </div>
            <div class="model_info_cont">
                <div class="model_img">
                    <img src="../image/shopImg/shop1.png" alt="">
                </div>
                <div class="model_name">
                    <div class="title_zh">这里是商品名</div>
                    <div class="title_en">Here is the name of the goods</div>
                </div>
            </div>
        </div>
        <div class="model_bottom_bar">
            <div class="model_btn collection_sure_btn">
                <div class="title_zh">确认</div>
                <div class="title_en">confirm</div>
            </div>
        </div>
    </div>
</div>
<!--删除-->
<div class="model_box delete_confirm_box">
    <div class="model_content">
        <div class="close_model_box icon-font icon-delete2circlecoloring" onclick="closeDelete()"></div>
        <div class="model_info">
            <div class="model_info_title">
                <div class="model_tip_icon icon-font icon-tishi2"></div>
                <div class="model_tip_title">
                    <div class="title_zh">确认删除该商品吗？</div>
                    <div class="title_en">Confirm to delete this product?</div>
                </div>
            </div>
            <div class="model_info_cont">
                <div class="model_img">
                    <img src="../image/shopImg/shop1.png" alt="">
                </div>
                <div class="model_name">
                    <div class="title_zh">这里是商品名</div>
                    <div class="title_en">Here is the name of the goods</div>
                </div>
            </div>
        </div>
        <div class="model_bottom_bar">
            <div class="model_btn delete_sure_btn">
                <div class="title_zh">确认</div>
                <div class="title_en">confirm</div>
            </div>
        </div>
    </div>
</div>
<div class="index_container">
    <div class="header">
        <div class="header_bar_container">
            <div class="header_bar">
                <ul class="header_bar_left">
                    <li>
                        <span class="icon-font icon-phone header_bar_icon"></span>
                        <p>1234567890</p>
                    </li>
                    <div class="site_pipe"></div>
                    <li>
                        <span class="icon-font icon-mail header_bar_icon"></span>
                        <p>12345@qq.com</p>
                    </li>
                </ul>
                <ul class="header_bar_right">
                    <li>
                        <div class="head_btn">
                            <div class="head_btn_title">登录</div>
                            <div class="head_btn_title">Login</div>
                        </div>
                    </li>
                    <div class="site_pipe"></div>
                    <li>
                        <div class="head_btn">
                            <div class="head_btn_title">注册</div>
                            <div class="head_btn_title">registred</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!--导航-->
        <div class="header_nav_container">
            <div class="header_nav_box">
                <div class="my_address">
                    <span class="icon-font icon-address header_bar_icon"></span>
                    <p>London</p>
                </div>
                <div class="logo">
                    <img src="" alt="">
                </div>
                <div class="header_nav">
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <div class="title_zh">首页</div>
                                <div class="title_en">Home</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="title_zh">购货</div>
                                <div class="title_en">Purchase</div>
                            </a>
                        </li>
                        <li class="active">
                            <a href="javascript:;">
                                <div class="title_zh">购货车</div>
                                <div class="title_en">Shopping Car</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="title_zh">我的</div>
                                <div class="title_en">Mine</div>
                            </a>
                        </li>
                        <li class="shop_search">
                            <div class="icon-font icon-search"></div>
                        </li>
                    </ul>
                </div>
                <!--搜索-->
                <div class="search_box">
                    <input type="text" class="" placeholder="请输入搜索内容/Enter the search content">
                    <div class="search_btn">
                        <div class="title_zh">搜索</div>
                        <div class="title_en">Search for</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--轮播-->
    <div class="banner">
        <ul>
            <li class="on" onclick="showList(0)"></li>
            <li onclick="showList(1)"></li>
            <li onclick="showList(2)"></li>
        </ul>
        <div class="banner_list">
            <a href="javascript:;"><img src="../image/banner/99F41A88514108E2EF7195BB5F68A316.png" title="" alt=""></a>
            <a href="javascript:;"><img src="../image/banner/D47EF50517F083B476AB231D5CDB2602.png" title="" alt=""></a>
            <a href="javascript:;"><img src="../image/banner/F8420969FFEED07A7280638F95DD0588.png" title="" alt=""></a>
        </div>
    </div>
    <div class="content">
        <!--订单列表-->
        <div class="my_order_container">
            <div class="order_list_box">
                <div class="order_list_bar">
                    <div class="list_bar_box">
                        <div class="order_title">
                            <div class="title_zh">全部商品</div>
                            <div class="title_en">username</div>
                        </div>
                        <div class="order_info_box">
                            <div class="order_price_title">
                                <div class="title_zh">已选商品</div>
                                <div class="title_en">username</div>
                            </div>
                            <div class="order_price">
                                <em>￡:</em>
                                <span>0.00</span>
                            </div>
                            <div class="submit_order">
                                <a href="javascript:;">
                                    <div class="title_zh">提交订单</div>
                                    <div class="title_en">Settlement</div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="order_list_content">
                    <div class="cartMain_hd">
                        <ul class="order_col cartTop">
                            <li class="list_chk">
                                <input type="checkbox" id="all" class="whole_check">
                                <label for="all"></label>
                                <div class="all_title">
                                    <div class="title_zh">全选</div>
                                    <div class="title_en">Settlement</div>
                                </div>
                            </li>
                            <li class="list_con">
                                <div class="title_zh">商品信息</div>
                                <div class="title_en">Settlement</div>
                            </li>
                            <li class="list_info">
                                <div class="title_zh">商品规格</div>
                                <div class="title_en">Settlement</div>
                            </li>
                            <li class="list_price">
                                <div class="title_zh">单价</div>
                                <div class="title_en">Settlement</div>
                            </li>
                            <li class="list_amount">
                                <div class="title_zh">数量</div>
                                <div class="title_en">Settlement</div>
                            </li>
                            <li class="list_sum">
                                <div class="title_zh">金额</div>
                                <div class="title_en">Settlement</div>
                            </li>
                            <li class="list_op">
                                <div class="title_zh">操作</div>
                                <div class="title_en">Settlement</div>
                            </li>
                        </ul>
                    </div>
                    <div class="cartBox">
                        <div class="shop_info">
                            <div class="all_check">
                                <!--店铺全选-->
                                <input type="checkbox" class="shopChoice">
                                <label class="shop"></label>
                            </div>
                            <div class="shop_name">
                                <a href="javascript:;">
                                    <div class="title_zh">这里是店铺名称</div>
                                    <div class="title_en">shop name</div>
                                </a>
                            </div>
                        </div>
                        <div class="order_content">
                            <ul class="order_col">
                                <li class="list_chk">
                                    <input type="checkbox" id="checkbox_2" class="son_check">
                                    <label for="checkbox_2"></label>
                                </li>
                                <li class="list_con">
                                    <div class="list_img"><a href="javascript:;"><img src="../image/shopImg/shop1.png" alt=""></a></div>
                                    <div class="list_text"><a href="javascript:;">这里是商品信息</a></div>
                                </li>
                                <li class="list_info">
                                    <div class="order_quantity">
                                        <span>20kg</span>
                                    </div>
                                </li>
                                <li class="list_price">
                                    <div class="unit_price">
                                        <p class="price">256/kg</p>
                                    </div>
                                </li>
                                <li class="list_amount">
                                    <div class="amount_box">
                                        <span>1</span>
                                    </div>
                                </li>
                                <li class="list_sum">
                                    <div class="sum_body">
                                        <div class="body_title">
                                            <div class="title_zh">总增值税</div>
                                            <div class="title_en">Total VAT</div>
                                        </div>
                                        <div class="body_cont">
                                            <em>￡</em>
                                            <span>100.00</span>
                                        </div>
                                    </div>
                                    <div class="sum_body">
                                        <div class="body_title">
                                            <div class="title_zh">收取总额</div>
                                            <div class="title_en">Grand total</div>
                                        </div>
                                        <div class="body_cont sum_price">
                                            <em>￡</em>
                                            <span>356.00</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="list_op">
                                    <div class="move_favorite_bar">
                                        <a href="javascript:;" onclick="openCollection()">
                                            <div class="title_zh">移入收藏夹</div>
                                            <div class="title_en">Move into favorites</div>
                                        </a>
                                    </div>
                                    <div class="delete_bar">
                                        <a href="javascript:;">
                                            <div class="title_zh">删除</div>
                                            <div class="title_en">Delete</div>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                            <ul class="order_col">
                                <li class="list_chk">
                                    <input type="checkbox" class="son_check">
                                    <label for="checkbox_2"></label>
                                </li>
                                <li class="list_con">
                                    <div class="list_img"><a href="javascript:;"><img src="../image/shopImg/shop1.png" alt=""></a></div>
                                    <div class="list_text"><a href="javascript:;">这里是商品信息</a></div>
                                </li>
                                <li class="list_info">
                                    <div class="order_quantity">
                                        <span>20kg</span>
                                    </div>
                                </li>
                                <li class="list_price">
                                    <div class="unit_price">
                                        <p class="price">256/kg</p>
                                    </div>
                                </li>
                                <li class="list_amount">
                                    <div class="amount_box">
                                        <span>1</span>
                                    </div>
                                </li>
                                <li class="list_sum">
                                    <div class="sum_body">
                                        <div class="body_title">
                                            <div class="title_zh">总增值税</div>
                                            <div class="title_en">Total VAT</div>
                                        </div>
                                        <div class="body_cont">
                                            <em>￡</em>
                                            <span>100.00</span>
                                        </div>
                                    </div>
                                    <div class="sum_body">
                                        <div class="body_title">
                                            <div class="title_zh">收取总额</div>
                                            <div class="title_en">Grand total</div>
                                        </div>
                                        <div class="body_cont sum_price">
                                            <em>￡</em>
                                            <span>356.00</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="list_op">
                                    <div class="move_favorite_bar">
                                        <a href="javascript:;" onclick="openCollection()">
                                            <div class="title_zh">移入收藏夹</div>
                                            <div class="title_en">Move into favorites</div>
                                        </a>
                                    </div>
                                    <div class="delete_bar">
                                        <a href="javascript:;">
                                            <div class="title_zh">删除</div>
                                            <div class="title_en">Delete</div>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="cartBox">
                        <div class="shop_info">
                            <div class="all_check">
                                <!--店铺全选-->
                                <input type="checkbox" id="shop_a" class="shopChoice">
                                <label for="shop_a" class="shop"></label>
                            </div>
                            <div class="shop_name">
                                <a href="javascript:;">
                                    <div class="title_zh">这里是店铺名称</div>
                                    <div class="title_en">shop name</div>
                                </a>
                            </div>
                        </div>
                        <div class="order_content">
                            <ul class="order_col">
                                <li class="list_chk">
                                    <input type="checkbox" class="son_check">
                                    <label for="checkbox_2"></label>
                                </li>
                                <li class="list_con">
                                    <div class="list_img"><a href="javascript:;"><img src="../image/shopImg/shop1.png" alt=""></a></div>
                                    <div class="list_text"><a href="javascript:;">这里是商品信息</a></div>
                                </li>
                                <li class="list_info">
                                    <div class="order_quantity">
                                        <span>20kg</span>
                                    </div>
                                </li>
                                <li class="list_price">
                                    <div class="unit_price">
                                        <p class="price">256/kg</p>
                                    </div>
                                </li>
                                <li class="list_amount">
                                    <div class="amount_box">
                                        <span>1</span>
                                    </div>
                                </li>
                                <li class="list_sum">
                                    <div class="sum_body">
                                        <div class="body_title">
                                            <div class="title_zh">总增值税</div>
                                            <div class="title_en">Total VAT</div>
                                        </div>
                                        <div class="body_cont">
                                            <em>￡</em>
                                            <span>100.00</span>
                                        </div>
                                    </div>
                                    <div class="sum_body">
                                        <div class="body_title">
                                            <div class="title_zh">收取总额</div>
                                            <div class="title_en">Grand total</div>
                                        </div>
                                        <div class="body_cont sum_price">
                                            <em>￡</em>
                                            <span>356.00</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="list_op">
                                    <div class="move_favorite_bar">
                                        <a href="javascript:;" onclick="openCollection()">
                                            <div class="title_zh">移入收藏夹</div>
                                            <div class="title_en">Move into favorites</div>
                                        </a>
                                    </div>
                                    <div class="delete_bar">
                                        <a href="javascript:;">
                                            <div class="title_zh">删除</div>
                                            <div class="title_en">Delete</div>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slogan">
        <div class="slogan_title">
            <p>Here is the slogan</p>
        </div>
        <div class="sub_slogan_title">
            <p>Here is the slogan</p>
        </div>
    </div>
    <div class="footer">
        <div class="footer_content">
            <div class="footer_cont_left">
                <div class="about_us_container">
                    <div class="footer_title">
                        <div class="title_zh">关于我们</div>
                        <div class="title_en">About us</div>
                    </div>
                    <div class="about_us_text">
                        <p>这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容这里是关于我们内容</p>
                    </div>
                </div>
                <div class="photos_stream_container">
                    <div class="footer_title">
                        <div class="title_zh">照片流</div>
                        <div class="title_en">Photos stream</div>
                    </div>
                    <div class="photos_img_box">
                        <div class="photos_img_a">
                            <img src="../image/footer/photos1.png" alt="">
                        </div>
                        <div class="photos_img_b">
                            <img src="../image/footer/photos2.png" alt="">
                        </div>
                        <div class="photos_img_c">
                            <img src="../image/footer/photos3.png" alt="">
                        </div>
                        <div class="photos_img_d">
                            <img src="../image/footer/photos4.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer_cont_right">
                <div class="contact_us_container">
                    <div class="footer_title">
                        <div class="title_zh">联系我们</div>
                        <div class="title_en">Contact us</div>
                    </div>
                    <div class="contact_us_area">
                        <div class="contact_row">
                            <div class="contact_icon icon-font icon-address"></div>
                            <div class="contact_title">
                                <div class="title_zh">地址</div>
                                <div class="title_en">address</div>
                            </div>
                            <div class="contact_cont">
                                <div class="title_zh">这里是地址</div>
                                <div class="title_en">Here is the address</div>
                            </div>
                        </div>
                        <div class="contact_row">
                            <div class="contact_icon icon-font icon-iconminesel"></div>
                            <div class="contact_title">
                                <div class="title_zh">联系人</div>
                                <div class="title_en">contact</div>
                            </div>
                            <div class="contact_cont">
                                <div class="title_zh">这里是联系人</div>
                                <div class="title_en">Here is the contact</div>
                            </div>
                        </div>
                        <div class="contact_row">
                            <div class="contact_icon icon-font icon-phone"></div>
                            <div class="contact_title">
                                <div class="title_zh">电话</div>
                                <div class="title_en">phone</div>
                            </div>
                            <div class="contact_cont">
                                <div class="title_zh">这里是电话号码</div>
                                <div class="title_en">Here is the phone number</div>
                            </div>
                        </div>
                        <div class="contact_row">
                            <div class="contact_icon icon-font icon-mail"></div>
                            <div class="contact_title">
                                <div class="title_zh">邮箱</div>
                                <div class="title_en">mailbox</div>
                            </div>
                            <div class="contact_cont">
                                <div class="title_zh">这里是邮箱</div>
                                <div class="title_en">Here is the email</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer_bottom_bar"><p>2018 © Metronic Shop UI. ALL Rights Reserved.</p></div>
    </div>
</div>

</body>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/common.js"></script>
<script>

    $(function () {
        bannerInit();
        //导航搜索
        $(".shop_search").on("click", function(e){
            if($(".search_box").is(":hidden")){
                $(".search_box").show();
            }else{
                $(".search_box").hide();
            }
            $(document).one("click", function(){
                $(".search_box").hide();
            });

            e.stopPropagation();
        });
        $(".search_box").on("click", function(e){
            e.stopPropagation();
        });
        //全局的checkbox选中和未选中的样式
        var $allCheckbox = $('input[type="checkbox"]'),     //全局的全部checkbox
            $wholeChexbox = $('.whole_check'),
            $cartBox = $('.cartBox'),                       //每个商铺盒子
            $shopCheckbox = $('.shopChoice'),               //每个商铺的checkbox
            $sonCheckBox = $('.son_check');                 //每个商铺下的商品的checkbox
        $allCheckbox.click(function () {
            if ($(this).is(':checked')) {
                $(this).prop("checked", true);
            } else {
                $(this).prop("checked", false);
            }
        });
        //全局全选与单个商品的关系
        $wholeChexbox.click(function () {
            var $checkboxs = $cartBox.find('input[type="checkbox"]');
            if ($(this).is(':checked')) {
                $checkboxs.prop("checked", true);
            } else {
                $checkboxs.prop("checked", false);
            }
            totalMoney();
        });

        $sonCheckBox.each(function () {
            $(this).click(function () {
                if ($(this).is(':checked')) {
                    //判断：所有单个商品是否勾选
                    var len = $sonCheckBox.length;
                    var num = 0;
                    $sonCheckBox.each(function () {
                        if ($(this).is(':checked')) {
                            num++;
                        }
                    });
                    if (num == len) {
                        $wholeChexbox.prop("checked", true);
                    }
                } else {
                    //单个商品取消勾选，全局全选取消勾选
                    $wholeChexbox.prop("checked", false);
                }
                totalMoney();
            })
        });
        $shopCheckbox.each(function () {
            $(this).click(function () {
                if ($(this).is(':checked')) {
                    //判断：店铺全选中，则全局全选按钮打对勾。
                    var len = $shopCheckbox.length;
                    var num = 0;
                    $shopCheckbox.each(function () {
                        if ($(this).is(':checked')) {
                            num++;
                        }
                    });
                    if (num == len) {
                        $wholeChexbox.prop("checked", true);
                    }
                    //店铺下的checkbox选中状态
                    $(this).parents('.cartBox').find('.son_check').prop("checked", true);
                } else {
                    //否则，全局全选按钮取消对勾
                    $wholeChexbox.prop("checked", false);

                    //店铺下的checkbox选中状态
                    $(this).parents('.cartBox').find('.son_check').prop("checked", false);
                }
                totalMoney();
            });
        });

        //每个店铺checkbox与其下商品的checkbox的关系
        //店铺$sonChecks有一个未选中，店铺全选按钮取消选中，若全都选中，则全选打对勾
        $cartBox.each(function () {
            var $this = $(this);
            var $sonChecks = $this.find('.son_check');
            $sonChecks.each(function () {
                $(this).click(function () {
                    if ($(this).is(':checked')) {
                        //判断：如果所有的$sonChecks都选中则店铺全选打对勾！
                        var len = $sonChecks.length;
                        var num = 0;
                        $sonChecks.each(function () {
                            if ($(this).is(':checked')) {
                                num++;
                            }
                        });
                        if (num == len) {
                            $(this).parents('.cartBox').find('.shopChoice').prop("checked", true);
                        }
                    } else {
                        //否则，店铺全选取消
                        $(this).parents('.cartBox').find('.shopChoice').prop("checked", false);
                    }
                    totalMoney();
                });
            });
        });

        //删除商品
        var $order_col = '';
        var $order_content = '';
        $('.delete_bar').click(function () {
            $order_col = $(this).parents('.order_col');
            $order_content = $order_col.parents('.order_content');
            $('.delete_confirm_box').fadeIn(300);
        });

        //确定按钮，移除商品
        $('.delete_sure_btn').click(function () {
            $order_col.remove();
            if($order_content.html().trim() == '' || $order_content.html().trim().length == 0){
                $order_content.parents('.cartBox').remove();
            }
            closeDelete();
            $sonCheckBox = $('.son_check');
            totalMoney();
        });
        //总计
        function totalMoney() {
            var total_money = 0;
            var submit_order = $('.submit_order a');
            $sonCheckBox.each(function () {
                if ($(this).is(':checked')) {
                    var goods = parseInt($(this).parents('.order_col').find('.sum_price span').html());
                    total_money += goods;
                }
            });
            $('.order_price span').html(total_money);
             console.log(total_money);
            if(total_money!=0){
                if(!submit_order.hasClass('btn_sty')){
                    submit_order.addClass('btn_sty');
                }
            }else{
                if(submit_order.hasClass('btn_sty')){
                    submit_order.removeClass('btn_sty');
                }
            }
        }
    });

    function closeDelete() {
        $('.delete_confirm_box').fadeOut(300);
    }
    //移入收藏夹
    function openCollection() {
        $('.collection_confirm_box').fadeIn(300);
    }
    function closeCollection() {
        $('.collection_confirm_box').fadeOut(300);
    }
</script>
</html>